{% extends 'base.html' %}
{% load staticfiles %}
{% block css %}
    <link href="{% static 'plugins/datetimepicker/css/bootstrap-datetimepicker.min.css' %}" rel="stylesheet"
          media="screen">
{% endblock %}
{% block js %}
    <script type="text/javascript"
            src="{% static 'plugins/datetimepicker/js/bootstrap-datetimepicker.min.js' %}"></script>
    <script>
        $(function () {
            $('.form_datetime').datetimepicker({
                showMeridian: true,
                autoclose: true,
                todayBtn: true,
                pickerPosition: 'bottom-left'
            });
            $('#pay_submit').on('click', function () {
                var user_pay = $('#user_pay').val();
                var start_at = $('#start_at').val();
                var end_at = $('#end_at').val();
                if(!user_pay||!start_at||!end_at){
                    layer.alert('缴费金额、有效期开始、有效期结束不能为空。', {icon:2})
                    return
                }
                $.post("{% url 'userapp:user_payment' %}",
                    {'user_id': '{{ user.id}}', 'user_pay': user_pay, 'start_at': start_at, 'end_at': end_at },
                    function (res) {
                    if(res.status==1){
                        layer.msg('\n\n        缴费成功！        \n\n', {
                            time: 30000, //20s后自动关闭
{#                            btn: ['ok']#}
                        });
                        window.location.reload();
                    }else{
                        layer.alert(res.message, {icon: 5})
                    }
                }, 'json')
            })
        })
    </script>
{% endblock %}
{% block content %}
    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper">
        <!-- Content Header (Page header) -->
        <section class="content-header">
            <h1>
                用户车辆管理
            </h1>
            <ol class="breadcrumb">
                <li><a href="#"><i class="fa fa-dashboard"></i>用户车辆管理</a></li>
                <li class="active">用户缴费</li>
            </ol>
        </section>
        <!-- Main content -->
        <section class="content">
            <div class="box box-primary">
                <div class="box-header with-border">
                    <h3 class="box-title">用户缴费(车牌：{{ user.car_number }})</h3>
                    <div class="box-tools pull-right">
                        <button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
                    </div><!-- /.box-tools -->
                </div><!-- /.box-header -->
                <div class="box-body">
                    <form class="form-horizontal">
                        <div class="form-group">
                          <label for="user_pay" class="col-sm-2 col-sm-offset-2 control-label">缴费金额：</label>
                          <div class="col-sm-4">
                            <div class="input-group">
                                <span class="input-group-addon">￥</span>
                                <input type="text" class="form-control" id="user_pay">
                                <span class="input-group-addon">元</span>
                            </div>
                          </div>
                        </div>
                        <div class="form-group">
                          <label for="user_pay" class="col-sm-2 col-sm-offset-2 control-label">开始时间：</label>
                          <div class="col-sm-4">
                            <div class="input-group date form_datetime">
                                <input type="text" name="expire_at" class="form-control" size="16" id="start_at">
                                <span class="input-group-addon"><span class="glyphicon glyphicon-th"></span></span>
                            </div>
                          </div>
                        </div>
                        <div class="form-group">
                          <label for="user_pay" class="col-sm-2 col-sm-offset-2 control-label">结束时间：</label>
                          <div class="col-sm-4">
                            <div class="input-group date form_datetime">
                                <input type="text" name="expire_at" class="form-control" size="16" id="end_at">
                                <span class="input-group-addon"><span class="glyphicon glyphicon-th"></span></span>
                            </div>
                          </div>
                        </div>
                        <div class="row">
                            <div class="col-sm-3 col-sm-offset-4 pt10">
                                <button type="button" class="btn btn-primary" id="pay_submit">
                                    <i class="fa fa-cny"></i> 缴费</button>
                            </div>
                            <div class="col-sm-3 pt10">
                                <button type="reset" class="btn btn-default "><i class="fa fa-undo"></i> 重置</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
            <ul class="timeline">
                <!-- timeline time label -->
                <li class="time-label">
                    <span class="bg-yellow">
                      <a href="" style="color:white;"> 缴费流水</a>
                    </span>
                </li>
                {% if payment_list %}
                    <!-- /.timeline-label -->
                    {% for payment in payment_list %}
                        <!-- timeline item -->
                        <li>
                            <!-- timeline icon -->
                            <i class="fa fa-chevron-up bg-aqua"></i>
                            <div class="timeline-item">
                                <span class="time"><i class="fa fa-clock-o"></i> {{ payment.payment_at }}</span>
                                <div class="timeline-body">
                                    用户【{{ payment.user.name }}】,车牌号【{{ payment.user.car_number }}】
                                    缴费：{{ payment.payment_amount }} 元，有效期：{{ payment.start_time }} 至 {{ payment.end_time }}.
                                </div>
                            </div>
                        </li>
                        <!-- END timeline item -->
                    {% endfor %}
                {% else %}
                    <!-- timeline item -->
                    <li>
                        <!-- timeline icon -->
                        <i class="fa fa-cny bg-aqua"></i>
                        <div class="timeline-item">
                            <div class="timeline-body">
                                无缴费流水
                            </div>
                        </div>
                    </li>
                    <!-- END timeline item -->
                {% endif %}
                <li>
                  <i class="fa fa-clock-o bg-gray"></i>
                </li>
            </ul>
        </section>
        <!-- /.content -->
    </div>
{% endblock %}